<template>
    <div 
    @click="close"
     class="information">
        <div @click.stop="" class="information-dialogue shadow  bg-white rounded">
             <!-- 加载标识 -->
            <div v-if="loading" class="showLoading d-flex justify-content-center align-items-center">
                <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
                </div>
            </div>
            <div class="msg">
                <div class="msg-content">
                    <p class="lead">{{content}}</p>
                </div>
                <div class="msg-opr-btn">
                    <button type="button" 
                    v-for="(item , index ) in opr" :key="index"
                    @click.stop="item.fn"
                    class="btn btn-primary btn-sm m-1">
                    {{item.title}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        
        from:{
            type: Object,
            default: null
        },
        content:{
            type: String,
            default: ""
        },
        opr: {
            type: Array,
            default:[]
        },
        loading:{
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            
        }
    },
    methods:{
        close(){
            this.from.msg.show = false;
        }
    }
}
</script>

<style lang="scss">
.information{
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    // background-color: rgba(219,219,219 , .5);
    text-align: center;
    // font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    z-index: 9999;
}
.information::after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.information-dialogue{
    display: inline-block;
    background-color: white;
    max-width: 36%;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: auto;
    position: relative;
    
}
.information-dialogue::after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.msg{
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
    white-space: pre-wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3em;
    .msg-content{
        
    }
    .msg-opr-btn{
        display: flex;
        justify-content: space-around;
    }

}

.showLoading{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}
</style>